<template>
	<view class="bi-remove-badge">
		<slot></slot>
		<view v-if="!disabled" class="bi-remove-badge__btn" title="删除" @click.stop="handleRemoveClick"></view>
	</view>
</template>

<script>
export default {
	name: 'BiRemoveBadge',
	props: {
		disabled: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleRemoveClick () {
			this.$emit('remove')
		}
	}
}
</script>

<style lang="less">
.bi-remove-badge{
	position: relative;
}
.bi-remove-badge__btn {
	position: absolute;
	top: -9px;
	right: -9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #F45662;
	&:after {
		content: '';
		height: 2px;
		width: 10px;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>